<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <!-- 1. 定义一个根标签,未来用来插入动态创建的dom对象 -->
    <div id="root"></div>
    <!-- 2. 引入react和react-dom-->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <!-- 3. 根据数据,动态的插件虚拟dom -->
    <!-- type="text/babel" 是告诉babel这个里面的代码需要被编译 -->
    <script type="text/babel">
      //   4. 让react帮我们将虚拟dom创建成真实dom,并渲染到页面
      let arr = [
        { id: 1, name: 'hj', age: 40, info: 'lsp' },
        { id: 2, name: 'lt', age: 58, info: 'lsp,二进制组合' },
        { id: 3, name: 'wxy', age: 18, info: '高富帅' },
      ]
      // [<li></li>,<li></li>]

      const lis = arr.map((item) => {
        // 返回什么,lis的数组中就是什么
        return (
          // 如果不加这个key.则react底层执行效率不高.加上了,则执行效率会更高.原因现在不能讲,后面讲了diff算法大家就明白了
          // key要写在一段jsx最外面的标签上, key的值要求不能重复
          <li key={item.id}>
            <h1>{item.name}</h1>
            <p>{item.age}</p>
            <i>{item.info}</i>
          </li>
        )
      })
      // console.log(lis)
      const ul = <ul>{lis}</ul>
      ReactDOM.render(ul, document.getElementById('root'))
    </script>
  </body>
</html>
